<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签学习指南 | 按单双标签分类</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        mono: ['Consolas', 'Monaco', 'monospace']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .tag-display {
                @apply bg-blue-50 text-primary px-2 py-1 rounded font-mono text-sm inline-block;
            }
            .example-container {
                @apply bg-gray-50 border border-gray-200 rounded-lg p-4 my-4 transition-all duration-300 hover:shadow-md;
            }
            .nav-item {
                @apply px-3 py-2 rounded-md hover:bg-primary/10 transition-colors duration-200 cursor-pointer;
            }
            .nav-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .section-card {
                @apply bg-white rounded-xl shadow-sm p-6 mb-8 transition-all duration-300 hover:shadow-md;
            }
            .category-tab {
                @apply px-4 py-2 rounded-md cursor-pointer transition-colors duration-200;
            }
            .category-tab.active {
                @apply bg-primary text-white;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <i class="fa fa-html5 text-orange-500 text-3xl mr-3"></i>
                <h1 class="text-2xl font-bold">HTML标签学习指南</h1>
            </div>
            <div class="flex items-center space-x-3">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-moon-o"></i>
                </button>
                <button id="search-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="search-container" class="hidden bg-gray-50 py-3 px-4 border-t border-gray-100">
            <div class="container mx-auto">
                <div class="relative">
                    <input type="text" id="tag-search" placeholder="搜索HTML标签..." 
                        class="w-full py-2 px-4 pr-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute right-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 分类切换标签 -->
        <div class="mb-8 bg-white rounded-xl shadow-sm p-4">
            <div class="flex flex-wrap gap-2">
                <div class="category-tab active" data-category="function">按功能分类</div>
                <div class="category-tab" data-category="tag-type">按单双标签分类</div>
            </div>
        </div>
        
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 侧边导航 -->
            <aside class="lg:w-1/4 xl:w-1/5">
                <!-- 功能分类导航（默认显示） -->
                <div id="function-nav" class="sticky top-24 bg-white rounded-xl shadow-sm p-5">
                    <h2 class="text-lg font-semibold mb-4 pb-2 border-b border-gray-200">按功能分类</h2>
                    <div class="space-y-1">
                        <div class="nav-item active" data-target="basic-tags">基础结构标签</div>
                        <div class="nav-item" data-target="text-tags">文本内容标签</div>
                        <div class="nav-item" data-target="semantic-tags">语义化标签</div>
                        <div class="nav-item" data-target="media-tags">媒体标签</div>
                        <div class="nav-item" data-target="form-tags">表单标签</div>
                        <div class="nav-item" data-target="table-tags">表格标签</div>
                        <div class="nav-item" data-target="other-tags">其他常用标签</div>
                    </div>
                </div>
                
                <!-- 单双标签分类导航（默认隐藏） -->
                <div id="tag-type-nav" class="sticky top-24 bg-white rounded-xl shadow-sm p-5 hidden">
                    <h2 class="text-lg font-semibold mb-4 pb-2 border-b border-gray-200">按单双标签分类</h2>
                    <div class="space-y-1">
                        <div class="nav-item active" data-target="single-tags">单标签（自闭合标签）</div>
                        <div class="nav-item" data-target="double-tags">双标签（成对标签）</div>
                    </div>
                </div>
            </aside>

            <!-- 内容区域 -->
            <div class="lg:w-3/4 xl:w-4/5">
                <!-- 介绍部分 -->
                <div class="section-card">
                    <h2 class="text-2xl font-bold mb-4">欢迎学习HTML标签</h2>
                    <p class="text-gray-600 mb-4">
                        HTML（超文本标记语言）是构建网页的基础。本指南将介绍常用的HTML标签及其用法，
                        帮助你理解如何使用这些标签来创建结构化、语义化的网页内容。
                    </p>
                    <p class="text-gray-600">
                        你可以按功能分类或按单双标签分类来浏览标签。每个标签都包含语法说明、使用示例和效果展示。
                        使用左侧导航可以浏览不同类别的标签，或使用顶部搜索框快速查找特定标签。
                    </p>
                </div>

                <!-- 功能分类内容（默认显示） -->
                <div id="function-content">
                    <!-- 基础结构标签 -->
                    <section id="basic-tags" class="tag-section">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-code text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">基础结构标签</h2>
                            </div>
                            
                            <!-- html标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;html&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">根元素标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义HTML文档的根元素，所有其他元素都嵌套在这个标签内。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
  &lt;head&gt;...&lt;/head&gt;
  &lt;body&gt;...&lt;/body&gt;
&lt;/html&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">说明：</h4>
                                <ul class="list-disc list-inside text-gray-600 mb-4 space-y-1">
                                    <li>通常包含一个lang属性，指定文档的语言</li>
                                    <li>包含两个主要子元素：&lt;head&gt;和&lt;body&gt;</li>
                                    <li>必须位于&lt;!DOCTYPE html&gt;声明之后</li>
                                </ul>
                            </div>
                            
                            <!-- head标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;head&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">文档头部标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">包含文档的元数据，如标题、字符集、样式表和脚本等。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;页面标题&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;</pre>
                            </div>
                            
                            <!-- title标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;title&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">页面标题标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义网页的标题，显示在浏览器标签页上，也用于搜索引擎结果。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <div class="bg-gray-800 text-white px-3 py-1 rounded-t-md text-sm flex items-center">
                                        <div class="flex space-x-1 mr-4">
                                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                        </div>
                                        页面标题示例 - 浏览器标签
                                    </div>
                                </div>
                            </div>
                            
                            <!-- body标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;body&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">文档主体标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">包含网页中所有可见的内容，如文本、图像、链接、表格等。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;body&gt;
  &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
  &lt;p&gt;这是一个段落。&lt;/p&gt;
&lt;/body&gt;</pre>
                            </div>
                        </div>
                    </section>

                    <!-- 文本内容标签 -->
                    <section id="text-tags" class="tag-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-font text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">文本内容标签</h2>
                            </div>
                            
                            <!-- 标题标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;h1&gt; 至 &lt;h6&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">标题标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义不同级别的标题，&lt;h1&gt;是最高级别，&lt;h6&gt;是最低级别。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <h1>这是一级标题 (h1)</h1>
                                    <h2>这是二级标题 (h2)</h2>
                                    <h3>这是三级标题 (h3)</h3>
                                    <h4>这是四级标题 (h4)</h4>
                                    <h5>这是五级标题 (h5)</h5>
                                    <h6>这是六级标题 (h6)</h6>
                                </div>
                            </div>
                            
                            <!-- p标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;p&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">段落标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义一个段落，浏览器会自动在段落前后添加空行。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p>这是第一个段落。HTML会自动处理段落中的换行和空格，多个空格或换行都会被视为一个空格。</p>
                                    <p>这是第二个段落。每个p标签都会在前后自动添加一定的间距。</p>
                                </div>
                            </div>
                            
                            <!-- br标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;br&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">换行标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">插入一个换行符，是一个自闭合标签，不需要结束标签。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p>这是第一行文本<br>
                                    这是第二行文本（使用br标签换行）<br>
                                    这是第三行文本</p>
                                </div>
                            </div>
                            
                            <!-- span标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;span&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">行内容器标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于对文档中的行内元素进行分组和样式化，本身没有特殊含义。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p>在这个段落中，<span style="color: red; font-weight: bold;">这段文字</span>
                                    被span标签包裹并应用了样式，<span style="background-color: yellow;">而这段文字</span>
                                    被另一个span标签包裹并应用了不同的样式。</p>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 语义化标签 -->
                    <section id="semantic-tags" class="tag-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-sitemap text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">语义化标签</h2>
                            </div>
                            
                            <!-- header标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;header&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">头部标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义文档的头部区域，通常包含标题、logo、导航等内容。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <header class="border-b pb-3">
                                        <h1>我的网站</h1>
                                        <nav>
                                            <ul class="flex space-x-4">
                                                <li><a href="#" class="text-primary hover:underline">首页</a></li>
                                                <li><a href="#" class="text-primary hover:underline">关于我们</a></li>
                                                <li><a href="#" class="text-primary hover:underline">联系我们</a></li>
                                            </ul>
                                        </nav>
                                    </header>
                                </div>
                            </div>
                            
                            <!-- nav标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;nav&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">导航标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义文档的导航链接部分，通常包含网站的主要导航链接。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <nav class="bg-gray-100 p-3 rounded">
                                        <ul class="flex flex-wrap gap-4">
                                            <li><a href="#" class="text-primary hover:underline">首页</a></li>
                                            <li><a href="#" class="text-primary hover:underline">产品</a></li>
                                            <li><a href="#" class="text-primary hover:underline">服务</a></li>
                                            <li><a href="#" class="text-primary hover:underline">博客</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            
                            <!-- article标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;article&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">文章标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义独立的、完整的内容块，如博客文章、新闻报道等。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <article class="border rounded-lg p-4">
                                        <h2>什么是HTML语义化标签？</h2>
                                        <p class="text-gray-600">语义化标签是指那些能够清晰描述其包含内容含义的HTML标签，如article、section、nav等。</p>
                                        <p class="text-gray-600">使用语义化标签可以提高网页的可访问性、SEO效果和代码可读性。</p>
                                    </article>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 媒体标签 -->
                    <section id="media-tags" class="tag-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-picture-o text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">媒体标签</h2>
                            </div>
                            
                            <!-- img标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;img&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">图像标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于在网页中嵌入图像，是自闭合标签。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;img src="image.jpg" alt="图片描述" width="600" height="400"&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <img src="https://picsum.photos/600/400?random=1" alt="风景照片示例" class="rounded-lg max-w-full h-auto">
                                </div>
                            </div>
                            
                            <!-- audio标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;audio&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">音频标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于在网页中嵌入音频内容。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <audio controls class="w-full max-w-md">
                                        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
                                        您的浏览器不支持音频播放。
                                    </audio>
                                </div>
                            </div>
                            
                            <!-- video标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;video&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">视频标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于在网页中嵌入视频内容。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <video controls width="100%" max-width="600" class="rounded-lg">
                                        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                                        您的浏览器不支持视频播放。
                                     </video>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 表单标签 -->
                    <section id="form-tags" class="tag-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-wpforms text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">表单标签</h2>
                            </div>
                            
                            <!-- form标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;form&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">表单标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义一个表单，用于收集用户输入。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;form action="/submit" method="post"&gt;
  &lt;!-- 表单控件 --&gt;
  &lt;input type="text" name="username"&gt;
  &lt;button type="submit"&gt;提交&lt;/button&gt;
&lt;/form&gt;</pre>
                            </div>
                            
                            <!-- input标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;input&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">输入框标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于创建各种类型的输入字段，类型由type属性指定。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container space-y-4">
                                    <div>
                                        <label class="block mb-1">文本输入：</label>
                                        <input type="text" placeholder="请输入用户名" class="px-3 py-2 border border-gray-300 rounded w-full max-w-md">
                                    </div>
                                    <div>
                                        <label class="block mb-1">密码输入：</label>
                                        <input type="password" placeholder="请输入密码" class="px-3 py-2 border border-gray-300 rounded w-full max-w-md">
                                    </div>
                                    <div>
                                        <input type="checkbox" id="agree">
                                        <label for="agree">同意服务条款</label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- button标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;button&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">按钮标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义一个按钮，可用于表单提交或其他交互功能。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container space-y-3">
                                    <button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90">主要按钮</button>
                                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">次要按钮</button>
                                    <button class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">危险按钮</button>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 表格标签 -->
                    <section id="table-tags" class="tag-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-table text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">表格标签</h2>
                            </div>
                            
                            <!-- table相关标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;table&gt;, &lt;tr&gt;, &lt;td&gt;, &lt;th&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">表格标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">
                                    &lt;table&gt;定义表格，&lt;tr&gt;定义表格行，&lt;td&gt;定义表格单元格，
                                    &lt;th&gt;用于定义表头单元格。
                                </p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <table border="1" class="border-collapse w-full max-w-md">
                                        <tr class="bg-gray-100">
                                            <th class="p-2 text-left">姓名</th>
                                            <th class="p-2 text-left">年龄</th>
                                            <th class="p-2 text-left">职业</th>
                                        </tr>
                                        <tr>
                                            <td class="p-2">张三</td>
                                            <td class="p-2">25</td>
                                            <td class="p-2">工程师</td>
                                        </tr>
                                        <tr>
                                            <td class="p-2">李四</td>
                                            <td class="p-2">30</td>
                                            <td class="p-2">设计师</td>
                                        </tr>
                                        <tr>
                                            <td class="p-2">王五</td>
                                            <td class="p-2">28</td>
                                            <td class="p-2">产品经理</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 其他常用标签 -->
                    <section id="other-tags" class="tag-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-ellipsis-h text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">其他常用标签</h2>
                            </div>
                            
                            <!-- a标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;a&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">链接标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义超链接，用于从一个页面链接到另一个页面。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container space-y-2">
                                    <p><a href="https://www.example.com" target="_blank" class="text-primary hover:underline">访问示例网站（在新窗口打开）</a></p>
                                    <p><a href="#basic-tags" class="text-primary hover:underline">跳转到基础结构标签</a></p>
                                </div>
                            </div>
                            
                            <!-- div标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;div&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">块级容器标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于对文档中的块级元素进行分组和样式化，是通用的容器。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <div style="background-color: #e3f2fd; padding: 15px; border-radius: 6px; margin-bottom: 10px;">
                                        <h3>第一个div容器</h3>
                                        <p>这是一个使用div标签创建的容器，常用于页面布局。</p>
                                    </div>
                                    <div style="background-color: #e8f5e9; padding: 15px; border-radius: 6px;">
                                        <h3>第二个div容器</h3>
                                        <p>多个div容器可以组合使用，构建复杂的页面结构。</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- iframe标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;iframe&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">内联框架标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于在当前HTML页面中嵌入另一个HTML页面。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <iframe src="https://www.example.com" width="100%" height="300" title="示例网站" frameborder="1" class="rounded-lg"></iframe>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                
                <!-- 单双标签分类内容（默认隐藏） -->
                <div id="tag-type-content" class="hidden">
                    <!-- 单标签（自闭合标签） -->
                    <section id="single-tags" class="tag-type-section">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-tag text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">单标签（自闭合标签）</h2>
                            </div>
                            
                            <p class="mb-6 text-gray-600">
                                单标签（也称为自闭合标签）是指不需要成对出现的HTML标签，它们没有结束标签，
                                通常用于插入内容或提供信息，而不是包裹其他内容。在HTML5中，单标签可以省略斜杠，
                                但为了兼容性，有时会写成&lt;tag /&gt;的形式。
                            </p>
                            
                            <!-- img标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;img&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">图像标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于在网页中嵌入图像。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;img src="image.jpg" alt="图片描述" width="600" height="400"&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <img src="https://picsum.photos/600/400?random=2" alt="示例图片" class="rounded-lg max-w-full h-auto">
                                </div>
                            </div>
                            
                            <!-- br标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;br&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">换行标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">插入一个换行符。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;p&gt;第一行文本&lt;br&gt;第二行文本&lt;/p&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p>这是第一行文本<br>这是第二行文本（使用br标签换行）</p>
                                </div>
                            </div>
                            
                            <!-- hr标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;hr&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">水平分隔线标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">创建一条水平分隔线，用于分隔文档中的不同部分。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;p&gt;这是第一段内容&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;这是第二段内容&lt;/p&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p>这是第一段内容</p>
                                    <hr>
                                    <p>这是第二段内容，与第一段用水平分隔线分开</p>
                                </div>
                            </div>
                            
                            <!-- input标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;input&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">输入框标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于创建各种类型的输入字段。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;input type="text" name="username" placeholder="请输入用户名"&gt;
&lt;input type="password" name="password" placeholder="请输入密码"&gt;
&lt;input type="checkbox" name="agree" id="agree"&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container space-y-3">
                                    <input type="text" placeholder="文本输入框" class="px-3 py-2 border border-gray-300 rounded">
                                    <input type="password" placeholder="密码输入框" class="px-3 py-2 border border-gray-300 rounded">
                                    <div>
                                        <input type="checkbox" id="accept">
                                        <label for="accept">复选框选项</label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- meta标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;meta&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">元数据标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">提供HTML文档的元数据，如字符集、描述、关键词等。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;meta charset="UTF-8"&gt;
&lt;meta name="description" content="这是一个HTML学习网站"&gt;
&lt;meta name="keywords" content="HTML, 标签, 学习"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">说明：</h4>
                                <ul class="list-disc list-inside text-gray-600 mb-4 space-y-1">
                                    <li>通常位于&lt;head&gt;标签内</li>
                                    <li>不会显示在页面上，但会被浏览器和搜索引擎使用</li>
                                    <li>viewport元标签用于响应式设计，控制移动设备上的页面显示</li>
                                </ul>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 双标签（成对标签） -->
                    <section id="double-tags" class="tag-type-section hidden">
                        <div class="section-card">
                            <div class="flex items-center mb-6">
                                <i class="fa fa-tags text-primary text-xl mr-3"></i>
                                <h2 class="text-2xl font-bold">双标签（成对标签）</h2>
                            </div>
                            
                            <p class="mb-6 text-gray-600">
                                双标签（也称为成对标签）是指需要成对出现的HTML标签，由开始标签和结束标签组成，
                                中间包含内容。结束标签与开始标签相同，但前面多了一个斜杠（/）。大多数HTML标签都是双标签。
                            </p>
                            
                            <!-- html标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;html&gt;...&lt;/html&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">根元素标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义HTML文档的根元素，所有其他元素都嵌套在这个标签内。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;html lang="zh-CN"&gt;
  &lt;head&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;页面内容&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
                            </div>
                            
                            <!-- 标题标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;h1&gt;...&lt;/h1&gt; 至 &lt;h6&gt;...&lt;/h6&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">标题标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义不同级别的标题。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <h1>&lt;h1&gt; - 这是一级标题&lt;/h1&gt;
                                    <h2>&lt;h2&gt; - 这是二级标题&lt;/h2&gt;
                                    <h3>&lt;h3&gt; - 这是三级标题&lt;/h3&gt;
                                </div>
                            </div>
                            
                            <!-- p标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;p&gt;...&lt;/p&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">段落标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义一个段落。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;p&gt;这是一个段落，包含一段文本内容。HTML会自动处理段落之间的间距。&lt;/p&gt;
&lt;p&gt;这是另一个段落，每个p标签都会创建一个新的段落。&lt;/p&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p>这是第一个段落，使用p标签定义。p标签会自动在段落前后添加空白。</p>
                                    <p>这是第二个段落，展示了p标签的使用效果。</p>
                                </div>
                            </div>
                            
                            <!-- a标签 -->
                            <div class="mb-8 pb-6 border-b border-gray-100">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;a&gt;...&lt;/a&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">链接标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">定义超链接，用于从一个页面链接到另一个页面。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;a href="https://www.example.com" target="_blank"&gt;访问示例网站&lt;/a&gt;
&lt;a href="#section1"&gt;跳转到页面中的某个部分&lt;/a&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <p><a href="https://www.example.com" target="_blank" class="text-primary hover:underline">这是一个链接，点击会打开示例网站</a></p>
                                    <p><a href="#single-tags" class="text-primary hover:underline">这是一个锚点链接，点击会跳转到单标签部分</a></p>
                                </div>
                            </div>
                            
                            <!-- div标签 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold mb-3">
                                    <span class="tag-display">&lt;div&gt;...&lt;/div&gt;</span>
                                    <span class="text-sm font-normal text-gray-500 ml-2">块级容器标签</span>
                                </h3>
                                <p class="mb-3 text-gray-600">用于对文档中的块级元素进行分组和样式化。</p>
                                
                                <h4 class="font-medium text-gray-700 mb-2">语法：</h4>
                                <pre class="bg-gray-50 p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
&lt;div style="background-color: lightblue; padding: 10px;"&gt;
  &lt;h3&gt;这是div容器内的标题&lt;/h3&gt;
  &lt;p&gt;这是div容器内的段落内容。&lt;/p&gt;
&lt;/div&gt;</pre>
                                
                                <h4 class="font-medium text-gray-700 mb-2">示例效果：</h4>
                                <div class="example-container">
                                    <div style="background-color: #e3f2fd; padding: 15px; border-radius: 6px;">
                                        <h3>这是div容器内的标题</h3>
                                        <p>这是div容器内的段落内容。div标签是最常用的块级容器，用于组织页面结构。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center">
                        <i class="fa fa-html5 text-orange-500 text-3xl mr-3"></i>
                        <h2 class="text-xl font-bold">HTML标签学习指南</h2>
                    </div>
                    <p class="text-gray-400 mt-2">掌握HTML基础，构建精彩网页</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-codepen text-2xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 HTML标签学习指南 | 一个帮助你学习HTML的资源网站</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 分类切换功能
        const categoryTabs = document.querySelectorAll('.category-tab');
        const functionNav = document.getElementById('function-nav');
        const tagTypeNav = document.getElementById('tag-type-nav');
        const functionContent = document.getElementById('function-content');
        const tagTypeContent = document.getElementById('tag-type-content');
        
        categoryTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 更新标签状态
                categoryTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const category = tab.getAttribute('data-category');
                
                // 显示对应的导航和内容
                if (category === 'function') {
                    functionNav.classList.remove('hidden');
                    tagTypeNav.classList.add('hidden');
                    functionContent.classList.remove('hidden');
                    tagTypeContent.classList.add('hidden');
                } else {
                    functionNav.classList.add('hidden');
                    tagTypeNav.classList.remove('hidden');
                    functionContent.classList.add('hidden');
                    tagTypeContent.classList.remove('hidden');
                }
                
                // 滚动到顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
        
        // 功能分类导航
        const functionNavItems = functionNav.querySelectorAll('.nav-item');
        const functionSections = functionContent.querySelectorAll('.tag-section');
        
        functionNavItems.forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有导航项的active类
                functionNavItems.forEach(nav => nav.classList.remove('active'));
                // 给当前点击的导航项添加active类
                item.classList.add('active');
                
                // 隐藏所有内容区域
                functionSections.forEach(section => section.classList.add('hidden'));
                // 显示对应的内容区域
                const targetId = item.getAttribute('data-target');
                functionContent.querySelector(`#${targetId}`).classList.remove('hidden');
                
                // 滚动到顶部
                window.scrollTo({
                    top: functionContent.offsetTop - 20,
                    behavior: 'smooth'
                });
            });
        });
        
        // 单双标签分类导航
        const tagTypeNavItems = tagTypeNav.querySelectorAll('.nav-item');
        const tagTypeSections = tagTypeContent.querySelectorAll('.tag-type-section');
        
        tagTypeNavItems.forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有导航项的active类
                tagTypeNavItems.forEach(nav => nav.classList.remove('active'));
                // 给当前点击的导航项添加active类
                item.classList.add('active');
                
                // 隐藏所有内容区域
                tagTypeSections.forEach(section => section.classList.add('hidden'));
                // 显示对应的内容区域
                const targetId = item.getAttribute('data-target');
                tagTypeContent.querySelector(`#${targetId}`).classList.remove('hidden');
                
                // 滚动到顶部
                window.scrollTo({
                    top: tagTypeContent.offsetTop - 20,
                    behavior: 'smooth'
                });
            });
        });
        
        // 搜索功能
        const searchBtn = document.getElementById('search-btn');
        const searchContainer = document.getElementById('search-container');
        const tagSearch = document.getElementById('tag-search');
        
        searchBtn.addEventListener('click', () => {
            searchContainer.classList.toggle('hidden');
            if (!searchContainer.classList.contains('hidden')) {
                tagSearch.focus();
            }
        });
        
        tagSearch.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase().trim();
            
            if (searchTerm === '') {
                // 如果搜索为空，显示默认视图
                categoryTabs.forEach(t => t.classList.remove('active'));
                document.querySelector('.category-tab[data-category="function"]').classList.add('active');
                functionNav.classList.remove('hidden');
                tagTypeNav.classList.add('hidden');
                functionContent.classList.remove('hidden');
                tagTypeContent.classList.add('hidden');
                
                // 激活第一个功能分类
                functionNavItems.forEach(nav => nav.classList.remove('active'));
                functionNavItems[0].classList.add('active');
                functionSections.forEach(section => section.classList.add('hidden'));
                functionSections[0].classList.remove('hidden');
                return;
            }
            
            // 在所有内容中搜索
            let found = false;
            const allSections = [...functionSections, ...tagTypeSections];
            
            allSections.forEach(section => {
                const sectionContent = section.textContent.toLowerCase();
                
                if (sectionContent.includes(searchTerm) && !found) {
                    // 确定所在的分类
                    const isFunctionSection = [...functionSections].includes(section);
                    
                    // 切换到对应的分类视图
                    categoryTabs.forEach(t => t.classList.remove('active'));
                    if (isFunctionSection) {
                        document.querySelector('.category-tab[data-category="function"]').classList.add('active');
                        functionNav.classList.remove('hidden');
                        tagTypeNav.classList.add('hidden');
                        functionContent.classList.remove('hidden');
                        tagTypeContent.classList.add('hidden');
                        
                        // 激活对应的导航项
                        functionNavItems.forEach(nav => {
                            nav.classList.remove('active');
                            if (nav.getAttribute('data-target') === section.id) {
                                nav.classList.add('active');
                            }
                        });
                    } else {
                        document.querySelector('.category-tab[data-category="tag-type"]').classList.add('active');
                        functionNav.classList.add('hidden');
                        tagTypeNav.classList.remove('hidden');
                        functionContent.classList.add('hidden');
                        tagTypeContent.classList.remove('hidden');
                        
                        // 激活对应的导航项
                        tagTypeNavItems.forEach(nav => {
                            nav.classList.remove('active');
                            if (nav.getAttribute('data-target') === section.id) {
                                nav.classList.add('active');
                            }
                        });
                    }
                    
                    // 显示找到的部分，隐藏其他部分
                    allSections.forEach(s => s.classList.add('hidden'));
                    section.classList.remove('hidden');
                    
                    found = true;
                    
                    // 滚动到找到的部分
                    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
        
        // 回到顶部按钮
        const backToTopBtn = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 深色模式切换
        const themeToggle = document.getElementById('theme-toggle');
        let isDarkMode = false;
        
        themeToggle.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            const icon = themeToggle.querySelector('i');
            
            if (isDarkMode) {
                // 切换到深色模式
                document.body.classList.add('bg-gray-900', 'text-gray-100');
                document.body.classList.remove('bg-gray-50', 'text-gray-800');
                icon.classList.remove('fa-moon-o');
                icon.classList.add('fa-sun-o');
                
                // 更新示例容器样式
                document.querySelectorAll('.example-container, pre, .section-card, #search-container, header').forEach(el => {
                    el.classList.add('bg-gray-800', 'border-gray-700');
                    el.classList.remove('bg-white', 'bg-gray-50', 'border-gray-200');
                });
            } else {
                // 切换到浅色模式
                document.body.classList.remove('bg-gray-900', 'text-gray-100');
                document.body.classList.add('bg-gray-50', 'text-gray-800');
                icon.classList.remove('fa-sun-o');
                icon.classList.add('fa-moon-o');
                
                // 恢复示例容器样式
                document.querySelectorAll('.example-container, pre').forEach(el => {
                    el.classList.remove('bg-gray-800', 'border-gray-700');
                    el.classList.add('bg-gray-50', 'border-gray-200');
                });
                
                document.querySelectorAll('.section-card, header').forEach(el => {
                    el.classList.remove('bg-gray-800');
                    el.classList.add('bg-white');
                });
                
                document.getElementById('search-container').classList.remove('bg-gray-800');
                document.getElementById('search-container').classList.add('bg-gray-50');
            }
        });
    </script>
</body>
</html>
    